<app-page-header [pageHeaderInfo]="pageHeaderInfo" />

<div class="normal-table-wrap">
  <div nz-row [nzGutter]="[32, 32]">
    <div nz-col [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXl]="16" [nzXs]="24" [nzXXl]="16">
      <app-water-mark />
      <div nz-row [nzGutter]="[32, 32]">
        <div nz-col nzSpan="24">
          <nz-card nzTitle="进行中的项目" [nzExtra]="extraTemplate">
            <div nz-row>
              @for (i of 6 | numberLoop; track $index) {
                <div nz-card-grid nz-col [nzLg]="8" [nzMd]="12" [nzSm]="24" [nzXl]="8" [nzXs]="24" [nzXXl]="8">
                  <nz-card-meta nzDescription="城镇中有那么多的酒馆，她却偏偏走进了我的酒馆" [nzTitle]="cardTitleTpl"></nz-card-meta>
                  <div class="card-foot">
                    <span nz-typography nzType="secondary">小华</span>
                    <span nz-typography nzType="secondary">4年前</span>
                  </div>
                </div>
              }
            </div>
          </nz-card>
        </div>
        <div nz-col nzSpan="24">
          <nz-card nzTitle="动态">
            <nz-list>
              @for (item of 6 | numberLoop; track $index) {
                <nz-list-item style="padding: 16px 24px">
                  <nz-list-item-meta>
                    <nz-list-item-meta-avatar [nzSrc]="'imgs/default_face.png'"></nz-list-item-meta-avatar>
                    <nz-list-item-meta-title>
                      <a>
                        曲丽丽 在
                        <span class="operate-text">高逼格设计天团</span>
                        新建项目
                        <span class="operate-text">六月迭代</span>
                      </a>
                    </nz-list-item-meta-title>
                    <nz-list-item-meta-description>19 天前</nz-list-item-meta-description>
                  </nz-list-item-meta>
                </nz-list-item>
              }
            </nz-list>
          </nz-card>
        </div>
      </div>
    </div>
    <div nz-col [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXl]="8" [nzXs]="24" [nzXXl]="8">
      <app-water-mark />
      <div nz-row [nzGutter]="[32, 32]">
        <div nz-col nzSpan="24">
          <nz-card nzTitle="快速开始/便捷导航">
            <div nz-row [nzGutter]="[16, 16]">
              @for (item of 6 | numberLoop; track $index) {
                <div nz-col nzSpan="6">
                  <a (click)="msg.success('点击了')">操作一</a>
                </div>
              }
              <div nz-col nzSpan="6">
                <button nz-button nzGhost nzType="primary" [nzSize]="'small'">
                  <i nz-icon nzType="plus"></i>
                  <span>添加</span>
                </button>
              </div>
            </div>
          </nz-card>
        </div>
        <div nz-col nzSpan="24">
          <nz-card nzTitle="xx指数">
            <div id="randar"></div>
          </nz-card>
        </div>
        <div nz-col nzSpan="24">
          <nz-card nzTitle="团队">
            <div nz-row>
              @for (item of 5 | numberLoop; track $index) {
                <div nz-col nzSpan="12">
                  <a class="group">
                    <nz-avatar [nzSize]="24" [nzSrc]="'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png'"></nz-avatar>
                    <span class="m-l-10">科学搬砖组</span>
                  </a>
                </div>
              }
            </div>
          </nz-card>
        </div>
      </div>
    </div>
  </div>
</div>

<ng-template #pageHeaderContent>
  <div class="mini-screen" nz-row>
    <div nz-col nzFlex="1">
      <div nz-row>
        <div class="m-r-25" nz-col nzFlex="72px">
          <img alt="" src="imgs/default_face.png" />
        </div>
        <div nz-col nzFlex="1">
          <h4 class="left-start-center m-0" nz-typography style="height: 50%">早安，Serati Ma，祝你开心每一天！</h4>
          <div class="left-start-center" nz-typography nzType="secondary" style="height: 50%">交互专家 |蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED</div>
        </div>
      </div>
    </div>
    <div nz-col nzFlex="280px">
      <nz-row>
        <nz-col [nzSpan]="8">
          <nz-statistic [nzTitle]="'项目数'" [nzValue]="(56 | number)!"></nz-statistic>
        </nz-col>
        <nz-col [nzSpan]="8">
          <nz-statistic [nzTitle]="'团队内排名'" [nzValue]="'8/24'"></nz-statistic>
        </nz-col>
        <nz-col [nzSpan]="8">
          <nz-statistic [nzTitle]="'项目访问'" [nzValue]="(2223 | number)!"></nz-statistic>
        </nz-col>
      </nz-row>
    </div>
  </div>
</ng-template>
<ng-template #extraTemplate>
  <a class="operate-text">全部项目</a>
</ng-template>

<ng-template #cardTitleTpl>
  <nz-avatar [nzSize]="24" [nzSrc]="'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png'"></nz-avatar>
  <span class="m-l-10">Angular</span>
</ng-template>
